import {iVisualConfigComponent, iVisualConfigComponentData, iVisualConfigComponentGroup} from "../packages/utils/data.type";
import {PlButton, PlFormItem, PlInput, PlNumber, PlCarousel, PlCarouselItem} from "plain-ui";
import {VisualEditorDataRender} from "../packages/components/VisualEditorDataRender/VisualEditorDataRender";
import './visualConfigComponentGroups.scss'

const createImageComponent = (name: string, defaultUrl: string): iVisualConfigComponent => ({
    name,
    code: 'image',
    previewImage: defaultUrl,
    defaultData: {
        data: {
            url: defaultUrl
        }
    },
    configList: [
        {
            title: '图片设置', render: ({data}: iVisualConfigComponentData) => (
                <>
                    <PlFormItem label="图片地址">
                        <PlInput v-model={data.url}/>
                    </PlFormItem>
                </>
            )
        }
    ],
    render: ({data}) => {
        return (
            <img src={data.url} style={{width: '100%', display: 'block'}}/>
        )
    },
})

export const visualConfigComponentGroups: iVisualConfigComponentGroup[] = [
    {
        title: '可用组件',
        children: [
            createImageComponent('图片_1', 'http://1.116.13.72/web/upload_file/20211223150351_7bd7769e-63be-11ec-8add-525400138871/adidas-shoes2.png'),
            createImageComponent('图片_2', 'http://1.116.13.72/web/upload_file/20211223150111_1cc8fb12-63be-11ec-8add-525400138871/adidas-shoes.png'),
            createImageComponent('图片_3', 'http://1.116.13.72/web/upload_file/20211221015637_2d8c4598-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87.png'),
            createImageComponent('图片_4', 'http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png'),
            createImageComponent('图片_5', 'http://1.116.13.72/web/upload_file/20211227222454_c26ec888-6720-11ec-8add-525400138871/222.png'),
            {
                name: '按钮',
                code: 'button',
                preview: () => (
                    <img
                        src="http://1.116.13.72/web/upload_file/20211223144240_86081321-63bb-11ec-8add-525400138871/filter_button.png"
                        style={{
                            width: "100%",
                            objectFit: 'contain',
                        }}
                    />
                ),
                defaultData: {
                    data: {
                        text: '按钮文案'
                    }
                },
                render: ({data}) => {
                    return (
                        <div style={{padding: "10px"}}>
                            <PlButton label={data.text} block size="large"/>
                        </div>
                    )
                },
                configList: [
                    {
                        title: '按钮设置', render: ({data}: iVisualConfigComponentData) => (
                            <>
                                <PlFormItem label="按钮文本">
                                    <PlInput v-model={data.text}/>
                                </PlFormItem>
                            </>
                        )
                    }
                ],
            },
            {
                name: '多列容器',
                code: 'column-container',
                previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
                defaultData: {
                    data: {
                        columnNum: 3,
                    },
                    childrenData: [],
                },
                render: (scope) => {
                    return (
                        <div class="visual-editor-column-container">
                            {new Array(scope.data.columnNum).fill(null).map((_, index) => (
                                <VisualEditorDataRender
                                    key={index}
                                    v-model={scope.childrenData![index]}
                                    onChange={() => {scope.childrenData = [...scope.childrenData || []]}}/>
                            ))}
                        </div>
                    )
                },
                configList: [
                    {
                        title: '容器设置', render: ({data}: iVisualConfigComponentData) => (
                            <>
                                <PlFormItem label="列数">
                                    <PlNumber v-model={data.columnNum}/>
                                </PlFormItem>
                            </>
                        )
                    }
                ],
            },
            {
                name: '多行容器',
                code: 'rows-container',
                previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
                defaultData: {
                    data: {
                        rowsNum: 3,
                    },
                    childrenData: [],
                },
                render: (scope) => {
                    return (
                        <div class="visual-editor-rows-container">
                            {new Array(scope.data.rowsNum).fill(null).map((_, index) => (
                                <VisualEditorDataRender
                                    key={index}
                                    v-model={scope.childrenData![index]}
                                    onChange={() => {scope.childrenData = [...scope.childrenData || []]}}/>
                            ))}
                        </div>
                    )
                },
                configList: [
                    {
                        title: '容器设置', render: ({data}: iVisualConfigComponentData) => (
                            <>
                                <PlFormItem label="行数">
                                    <PlNumber v-model={data.rowsNum}/>
                                </PlFormItem>
                            </>
                        )
                    }
                ],
            },
            {
                name: '轮播容器',
                code: 'carousel-container',
                previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
                defaultData: {
                    data: {
                        carouselNum: 3,
                    },
                    childrenData: [],
                },
                render: (scope) => {
                    return (
                        <div class="visual-editor-rows-container" style={{overflow: 'hidden'}}>
                            <PlCarousel autoplay={0} height={500}>
                                {new Array(scope.data.carouselNum).fill(null).map((_, index) => (
                                    <PlCarouselItem>
                                        <VisualEditorDataRender
                                            style={{height: '100%'}}
                                            key={index}
                                            v-model={scope.childrenData![index]}
                                            onChange={() => {scope.childrenData = [...scope.childrenData || []]}}/>
                                    </PlCarouselItem>
                                ))}
                            </PlCarousel>
                        </div>
                    )
                },
                configList: [
                    {
                        title: '容器设置', render: ({data}: iVisualConfigComponentData) => (
                            <>
                                <PlFormItem label="轮播个数">
                                    <PlNumber v-model={data.carouselNum}/>
                                </PlFormItem>
                            </>
                        )
                    }
                ],
            },
        ]
    },
    {
        title: '容器组件',
        children: [
            {name: '普通容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221012528_d382778c-61b9-11ec-8add-525400138871/%E6%99%AE%E9%80%9A%E5%AE%B9%E5%99%A8.svg'},
            {name: '宫格容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015748_5780e5d8-61be-11ec-8add-525400138871/browser-grid.svg'},
            {name: '正方形容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221023400_66115a5a-61c3-11ec-8add-525400138871/square.png'},
            {name: '多列容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png'},
            {name: '卡片容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020019_b1f016e6-61be-11ec-8add-525400138871/Pay_with_card.svg'},
            {name: '选项卡容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020014_aea8ef7e-61be-11ec-8add-525400138871/operate.svg'},
            {name: '折叠容器', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221022823_9daafc67-61c2-11ec-8add-525400138871/collapse.png'},
        ],
    },
    {
        title: '媒体组件',
        children: [
            {name: '音频', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020003_a8084131-61be-11ec-8add-525400138871/music.svg'},
            {name: '视频', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020103_cbfa0019-61be-11ec-8add-525400138871/videotape_one.svg'},
            {name: '地图', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015958_a55d8b8a-61be-11ec-8add-525400138871/-map.svg'},
            {name: '图片', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021804_2c676e7a-61c1-11ec-8add-525400138871/New_img.png',},
            {name: '文件', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021759_29a1aa15-61c1-11ec-8add-525400138871/filesimg.png'},
        ],
    },
    {
        title: '图表组件',
        children: [
            {name: '面积图', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015618_2217cabf-61be-11ec-8add-525400138871/%E9%9D%A2%E7%A7%AF%E5%9B%BE.png'},
            {name: '柱状图', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015711_41a4c5b4-61be-11ec-8add-525400138871/%E6%9F%B1%E7%8A%B6%E5%9B%BE.png'},
            {name: '漏斗图', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015615_207d80a2-61be-11ec-8add-525400138871/%E6%BC%8F%E6%96%97%E5%9B%BE.png'},
            {name: '折线图', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015704_3d9f0cea-61be-11ec-8add-525400138871/%E6%8A%98%E7%BA%BF%E5%9B%BE.png'},
            {name: '饼图', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015510_f9c5a439-61bd-11ec-8add-525400138871/%E9%A5%BC%E5%9B%BE.png'},
        ],
    },
    {
        title: '组合组件',
        children: [
            {name: '商品卡片', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015637_2d8c4598-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87.png'},
            {name: '横幅', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png'},
            {name: '推荐列表', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015641_2f8ab077-61be-11ec-8add-525400138871/%E6%8E%A8%E8%8D%90%E5%88%97%E8%A1%A8.png'},
            {name: '活动', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015516_fd0d8966-61bd-11ec-8add-525400138871/%E6%B4%BB%E5%8A%A8.png'},
            {name: '商品大类', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015634_2ba80879-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%A4%A7%E7%B1%BB.png'},
        ],
    },
    {
        title: '其他组件',
        children: [
            {name: '登陆表单', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015507_f7ddac5f-61bd-11ec-8add-525400138871/%E8%A1%A8%E5%8D%95.png'},
            {name: '注册表单', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015707_3f91b4ca-61be-11ec-8add-525400138871/%E6%B3%A8%E5%86%8C.png'},
            {name: '商城模板', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015626_26983540-61be-11ec-8add-525400138871/%E5%95%86%E5%9F%8E%E6%A8%A1%E6%9D%BF.png'},
            {name: '未命名_1', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015657_38a88e52-61be-11ec-8add-525400138871/%E6%9C%AA%E5%91%BD%E5%90%8D_1.png'},
            {name: '未命名_2', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015700_3b55d3ea-61be-11ec-8add-525400138871/%E6%9C%AA%E5%91%BD%E5%90%8D_2.png'},
        ],
    },
    {
        title: '基础组件',
        children: [
            {name: '输入框', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_ad00d1f9-61c1-11ec-8add-525400138871/text.png'},
            {name: '多行输入', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_329319b9-61c1-11ec-8add-525400138871/text.png'},
            {name: '密码输入', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021806_2dc563af-61c1-11ec-8add-525400138871/password.png'},
            {name: '数字输入', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020009_abdc8e74-61be-11ec-8add-525400138871/number.svg'},
            {name: '评分输入', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_328efad2-61c1-11ec-8add-525400138871/star.png'},
            {name: '滑动条', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020047_c21e2009-61be-11ec-8add-525400138871/sliders.svg'},
            {name: '选择框', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png'},
            {name: '树形选择', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020025_b5244ca8-61be-11ec-8add-525400138871/reporting-tree_select-32.svg'},
            {name: '级联选择', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015938_99495e01-61be-11ec-8add-525400138871/Collapse.svg'},
            {name: '穿梭框', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021757_28541bdc-61c1-11ec-8add-525400138871/Exchange.png'},
            {name: '复选框组', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021754_26d0f620-61c1-11ec-8add-525400138871/checkbox.png'},
            {name: '单选框组', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021809_2f35e5c2-61c1-11ec-8add-525400138871/radio.png'},
            {name: '日期选择', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015946_9de17765-61be-11ec-8add-525400138871/date.svg'},
            {name: '日期范围', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021801_2ae87da4-61c1-11ec-8add-525400138871/filter_date.png'},
            {name: '时间选择', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_32947b59-61c1-11ec-8add-525400138871/Time_icon.png'},
            {name: '时间范围', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020108_cee45bee-61be-11ec-8add-525400138871/wd-applet-enter-time.svg'},
            {name: '上传', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221020058_c91bb90a-61be-11ec-8add-525400138871/Upload.svg'},
            {name: '拖拽上传', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221015951_a0d97867-61be-11ec-8add-525400138871/drag-drop.svg'},
            {name: '开关', code: '', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_3291a5e6-61c1-11ec-8add-525400138871/switch-01.png'},
        ],
    },
]
